<template>
    <div class="content-right">
    	<card shadw>
    		<Row class="test-stutas-wrap">
    			<Col :xs="12" :sm="6" :md="3" :lg="3">
    				<router-link :to="{name:'examination-set',query:{id:this.$route.query.id}}"><Button type="primary" icon="chevron-left">返回考试列表</Button></router-link>
    		 	</Col>
    		 	<Col :xs="12" :sm="6" :md="9" :lg="7" class="test-stutas">
    		 		考场名字：{{eRoomName}}
    		 	</Col>
    		 	<Col :xs="12" :sm="6" :md="4" :lg="7" class="test-stutas">
    		 	 	考场状态：{{examStatusStr}}
    			</Col>
    			<Col :xs="12" :sm="6" :md="4" :lg="3" class="test-stutas">
    		 		当前参考人数：{{testPersonnelNum}}
    		 	</Col>
    		 	<Col :xs="12" :sm="6" :md="4" :lg="4">
    		 	 <Button type="primary" @click="publishPerformance">公布考生成绩</Button>
    			</Col>
    		</Row>
    		<Form ref="formCustom" :model="formCustom" @keyup.enter.native="handleSubmit">
	    		<Row class="grade-inquire" :gutter="16">
	    		 	<Col :xs="12" :sm="6" :md="6" :lg="6">
	    		 		<Input placeholder="请输入考生ID/姓名/身份证号/绑定手机" v-model="formCustom.keywords"></Input>
	    		 	</Col>
	    		 	<Col :xs="12" :sm="6" :md="4" :lg="2" class="time">
	    		 	 	<Select placeholder="请选择" v-model="formCustom.testStatus" clearable >
					        <Option v-for="item in cityList" :value="item.value" :key="item.value" >{{ item.label }}</Option>
					    </Select>
	    			</Col>
	    			<Col :xs="12" :sm="6" :md="4" :lg="2" class="time">
	    		 		<Select  placeholder="请选择" v-model="formCustom.isQualified" clearable >
					        <Option v-for="item in qualiFied" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
	    		 	</Col>
	    		 	<Col :xs="12" :sm="6" :md="2" :lg="2" class="time">
	    		 		分数区间: 
	    			</Col>
	    			<Col :xs="12" :sm="6" :md="2" :lg="3" >
	    		 		<Input v-model="formCustom.gradeGt"></Input>
	    		 	</Col>
	    		 	<Col :xs="12" :sm="6" :md="2" :lg="3">
	    		 		<Input v-model="formCustom.gradeLt"></Input>
	    		 	</Col>
	    		 	<Col :xs="12" :sm="6" :md="4" :lg="4" class="time" >
	    		 	 	<Button type="primary" @click="handleSubmit()">搜索</Button>
	    			</Col>
	    		</Row>
    		</Form>
    		<div class="table">
		        <Table border ref="selection" :columns="columns4" :data="data1"  @on-selection-change='selectedNum'></Table>
		        <div class="search">
			        <Checkbox @on-change="handleSelect()" v-model='checkboxStatus' class="checkbox">全选</Checkbox>
			        <Button type="ghost"  @click="derive">导出数据</Button>
			        <Page :total="parseInt(data1Count)" show-elevator show-total :page-size="4" :current='page' @on-change="paging"></Page>
		        </div>
	   		</div>
    	</card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import {router} from "@/router/index.js";
import util from "@/libs/util.js";
export default {
    data() {
        return {
        	//考场名字
        	eRoomName:'',
            //考场状态
            examStatusStr:'',
            //当前考场人数
            testPersonnelNum:0,
        	//考试时间
        	examStartTime:"",
        	examEndTime:'',
        	//现在时间
        	nowTime:'',
        	cityList: [
                {
                    value: '1',
                    label: '正常'
                },  
                {
                    value: '0',
                    label: '缺考'
                }
            ],
            formCustom:{
            	keywords:"",
            	testStatus:"",
            	isQualified:"",
            	gradeGt:"",
            	gradeLt:"",
            },
            checkboxStatus:'',
            data3:[],
            enidId:'',
            nameLength:0,
            academicRecordsId1:0,
            selectedAll:"",
//       分页
		 	page:1,
		 	data1Count:'',
            qualiFied:[
	            {
	                value: "不合格",
	                label:'不合格'
	           	},
                {
                    value: "合格",
                    label:'合格'
                },
            ],
            model1: '',
            columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Id',
                        width: 60,
                        key: 'academicRecordsId',
                        align: 'center'
                    },
                    {
                        title: '真实姓名',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '身份证号',
                        key: 'idcard',
                        align: 'center',
                        render:(h,params)=>{
	                        var num=params.row.idcard;
	                        return h('div',num=num.slice(0,3)+'****'+num.slice(num.length-4,))
	                    }
                    },
                    {
                        title: '绑定手机',
                        key: 'phone',
                        align: 'center'
                    },
                    {
                        title: '考试状态',
                        width: 100,
                        key: 'testStatus',
                        align: 'center',
                        render:function(h,params){
                    		return h('div',
                    			params.row.testStatus=='1'?'正常':'缺考'
                    	)}
                    },
                    {
                        title: '开始考试时间',
                        key: 'eStartTime',
                        align: 'center',
                        width: 150,
                        render:function(h,params){
                			return h('div',
                				util.timestampToTime(params.row.eStartTime)
                		)}
                    },
                    {
                        title: '考试分数',
                        width: 90,
                        align: 'center',
                        key: 'grade'
                    },
                    {
                        title: '是否合格',
                        key: 'isQualified',
                        align: 'center',
                    },
                     {
                        title: '考试耗时',
                        width: 90,
                        key: 'passScore',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'address',
                        align: 'center',
                        render:function(h,parent){
                        	return h('div',[
								h('Button',{
									props:{
										type:"error",
										icon:"compose"
									},
									on:{
										click:function(){
											router.push({
												name:"examination-particulars",
												query:{
		    										id:parent.row.academicRecordsId,
		    									}
											})
										}
									}
								},"考卷详情")
							])	
                        }
                    }
                ],
        }
    },
    created:function(){
        this.eRoomInfo();
    	this.eRoomName=this.$route.query.name;
    	this.examStartTime=parseInt(this.$route.query.examStartTime);
    	this.examEndTime=parseInt(this.$route.query.examEndTime);
    	var time=Date.parse(new Date())+'';
    	this.nowTime=parseInt(time.substr(0,10))
    	this.loadData();
    },
    watch:{
	   '$route':function(){
	   	this.loadData();
	   	this.handleSelect();
	   }
    },
 	computed:{
 		//计算考试状态
 		testStatus2:function(){
 			var str='';
 			if(this.nowTime<this.examStartTime){
 				str='考试未开始';
 			}
 			if(this.nowTime>=this.examStartTime&&this.nowTime<=this.examEndTime){
 				str='正在考试';
 			}
 			if(this.nowTime>this.examEndTime){
 				str='考试结束';
 			}
 			return str;
 		},
		data1:function(){
			var arr=[];
			this.data3.forEach(function(data){
				var obj={academicRecordsId:0,name:"",idcard:0,phone:"",eStartTime:'',grade:0,testStatus:0,isQualified:"",passScore:0,examineeId:0};
				obj.academicRecordsId=data.academicRecordsId;
				obj.name=data.name;
				obj.idcard=data.idcard;
				obj.phone=data.phone;
				obj.eStartTime=data.eStartTime;
				obj.grade=data.grade;
				obj.testStatus=data.testStatus;
				obj.isQualified=data.isQualified;
				obj.passScore=data.passScore;
				arr=arr.concat(obj);
			})
			return arr;
		},
	},
    methods: {
        //获取考场信息
        eRoomInfo(){
            var that=this;
            var id=this.$route.query.id;
            this.axios({
                method:'get',
                url:that.$store.state.app.globalUrl+"/admin/ExaminationRoom/getDetail?id="+id,
                data:{

                }
            }).then(function(res){
                that.eRoomName=res.data.data.examinationRoom.name;
                that.examStatusStr=res.data.data.examinationRoom.examStatusStr;
                that.testPersonnelNum=res.data.data.examinationRoom.testPersonnelNum;
            })
        },
		handleSelectAll (status) {
            this.$refs.selection.selectAll(status);
        },
        handleSelect() {
			this.checkAll=!this.checkAll;
			this.$refs.selection.selectAll(this.checkAll);
       	},
//     	搜索
       	handleSubmit() {
		        this.loadData();
		   },
//		公布考生成绩
		publishPerformance(){
			this.$router.push({
                name:'grade-management',
            })
		},
//     	 分页
        paging:function(pa){
        	this.page=pa;
        	this.loadData();
        	this.selected=[];
        },
       	//获取checkbox选中条数
       	selectedNum:function(page){
	    	var that=this;
            that.selectedAll=[];
            that.selected=[];
            that.selectedAll=page;
	    	page.forEach(function(page){
	    		that.selected.push(page.Id)	
			})
	    },
//		获取列表
	loadData:function(){
		this.enidId=this.$route.query.id;
    	var that=this;
    	var keywords1=that.formCustom.keywords==""?'':('&keywords='+that.formCustom.keywords);
    	var testStatus1=that.formCustom.testStatus==""?"":('&testStatus='+that.formCustom.testStatus);
    	var isQualified1=that.formCustom.isQualified==""?"":('&isQualified='+that.formCustom.isQualified);
    	var gradeGt1=that.formCustom.gradeGt==""?'':('&gradeGt='+that.formCustom.gradeGt);
    	var gradeLt=that.formCustom.gradeLt==""?'':('&gradeLt='+that.formCustom.gradeLt);
    	this.axios({
    		method:'get',
    		url:that.$store.state.app.globalUrl+'/admin/AcademicRecords/index?size='+10+'&page='+that.page+keywords1+testStatus1+isQualified1+gradeGt1+gradeLt+'&eRoomId='+that.enidId,
    	}).then(function(res){
			that.data3=res.data.data.list;
			that.data1Count=res.data.data.count;
			that.nameLength=res.data.data.list.length;
			that.checkboxStatus=false;
    	});
    },
      //     导出数据
		derive:function(){
			if(this.selectedAll.length>0){
            	var columnsArr=[
	            	{title: 'Id',key: 'academicRecordsId'},
	            	{title: '真实姓名',key: 'name'},
	            	{title: '身份证号',key: 'idcard'},
	            	{title: '绑定手机',key: 'phone'},
	            	{title: '考试状态',key: 'testStatus'},
	            	{title: '开始考试时间',key: 'eStartTime'},
	            	{title: '考试分数',key: 'grade'},
	            	{title: '是否合格',key: 'isQualified'},
	            	{title: '考试耗时',key: 'passScore'},
	            	];
            	var selectedAllListData=[];
            	this.selectedAll.forEach(function(v){
            		var obj={
            			Id:v.Id,
            			name:v.name,
            			idcard:v.idcard,
            			phone:v.phone,
            			testStatus:(v.testStatus=='1'?'正常':'缺考'),
            			eStartTime:util.timestampToTime(v.eStartTime),
            			grade:v.grade,
            			isQualified:v.isQualified,
            			passScore:v.passScore,
            		}
            		selectedAllListData.push(obj)
            	})
            	this.$refs.selection.exportCsv({
            	    filename: '试卷列表',
            	    columns:columnsArr,
            	    data:selectedAllListData
            	});
            }else{
            	this.$Message.error('未选择数据');
            }
			
		}
    }
};
</script>
<style scoped>
.time{margin-left: 10px;line-height: 32px;}
.grade-inquire{margin-top: 10px;}
.time1{margin-left: 30px;}
.table{margin-top:10px;}
.table button{margin-top: 10px;float: left; margin-left: 10px;}
.table .ivu-page{float: right;margin-top: 10px; }
.checkbox{float: left;margin-top: 20px;}
.search{padding:10px 0;overflow: hidden;}
.test-stutas{line-height: 32px;}
.test-stutas-wrap{margin-bottom: 20px;}
.ivu-form{margin-bottom: 20px;}
</style>
